<template>
	<div>
		<!-- 面包屑 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/layout' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>消息管理</el-breadcrumb-item>
			<el-breadcrumb-item>消息列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片布局 -->
		<el-card>
			<!-- 植入搜索栏 -->
			<el-row :gutter="20">
				<el-col :span="5"><el-input clearable placeholder="搜索发送人" v-model="searchFrom" clearableclear="getConversationList"></el-input></el-col>
				<el-col :span="5"><el-input clearable placeholder="搜索接收人" v-model="searchTo" clearableclear="getConversationList"></el-input></el-col>
				<el-col :span="5"><el-input clearable placeholder="查询正文" v-model="searchContent" clearableclear="getConversationList"></el-input></el-col>

				<el-col :span="2">
					<el-button type="primary" @click="getConversationList()">
						<el-icon><Search /></el-icon>
					</el-button>
				</el-col>
			</el-row>
			<!-- 放入table -->
			<el-table
				:data="messageList"
				style="width: 100%; height: 550px; margin-top:10px;"
				border
				:header-cell-style="{ height: '37px', padding: '0' }"
				:row-style="{ height: '37px' }"
				:cell-style="{ padding: '0' }"
			>
				<!-- 数据绑定 -->
				<el-table-column label="会话id" width="100" prop="conversationId"></el-table-column>
				<el-table-column label="会话发起人" width="120" prop="fromId"></el-table-column>
				<el-table-column label="会话接收人" width="120" prop="toId"></el-table-column>
				<el-table-column label="正文" width="450" prop="content"></el-table-column>
				<el-table-column
					label="会话状态"
					width="150"
					prop="status"
					:filters="[{ text: '已读', value: '1' }, { text: '未读', value: '0' }]"
					:filter-method="filterFinish"
					:formatter="formatFinish"
				></el-table-column>
				<el-table-column label="创建者" width="80" prop="createBy"></el-table-column>
				<el-table-column label="创建时间" width="200" prop="createDate"></el-table-column>
				<el-table-column label="最近修改人" width="100" prop="updateBy"></el-table-column>
				<el-table-column label="最近修改" width="200" prop="lastUpdate"></el-table-column>
				<el-table-column fixed="right" label="操作" width="150">
					<template #default="scope">
						<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页模块 -->
			<el-pagination
				v-model:current-page="pageNo"
				v-model:page-size="pageSize"
				:page-sizes="[50, 100, 200, 500]"
				:small="false"
				:disabled="false"
				:background="true"
				layout="total, sizes, prev, pager, next"
				:total="totalCount"
				@size-change="onSizeChange"
				@current-change="onPageChange"
			/>
		</el-card>
	</div>
</template>
<script>
import { conversationList } from '@/api/conversation';
import { Search } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
export default {
	data() {
		return {
			statusOption: [
				{
					value: '0',
					label: '未读'
				},
				{
					value: '1',
					label: '已读'
				}
			],

			searchStr: '',
			pageNo: 1,
			pageSize: 50,
			totalCount: 0,

			searchFrom: '',
			searchTo: '',
			searchContent: '',

			messageList: []
		};
	},
	methods: {
		getConversationList() {
			this.searchStr = {
				searchFrom: this.searchFrom,
				searchTo: this.searchTo,
				searchContent: this.searchContent
			};
			const param = { page: this.pageNo, limit: this.pageSize, searchStr: this.searchStr };
			console.log(param);
			conversationList(param).then(resp => {
				this.totalCount = resp.total;
				this.messageList = resp.rows;
			});
		},
		onSizeChange(pageSize) {
			this.pageNo = 1;
			this.pageSize = pageSize;
			this.getConversationList();
		},
		onPageChange(page) {
			this.pageNo = page;
			this.getConversationList();
		},
		filterFinish(value, row) {
			return row.status == value;
		},
		formatFinish(row, column, cellValue, index) {
			const option = this.statusOption.find(item => item.value == cellValue);
			return option ? option.label : cellValue;
		}
	},
	mounted() {
		//组件被挂载自动调用方法
		this.getConversationList();
		const param = { page: '', limit: '' };
		conversationList(param).then(resp => {
			this.messageList = resp.rows;
		});
	}
};
</script>

<style scoped>
div.el-breadcrumb {
	height: 45px;
}

.el-dialog__body {
	padding: 0px 15px;
}

.el-form-item {
	/* height: 68px; */
}
</style>
